<template>
  <div class="applyView">
    <!-- 标题 -->
    <Title>
      <template #default>{{ title }}</template>
    </Title>
    <!-- 内容区 -->
    <section class="contentLayout">
      <div class="selectBox">
        <div class='selectBoxFather'>
          <div class="selectBoxSon">
            <div style="text-align: center;line-height: 32px">学历：</div>
            <el-select v-model="education" placeholder="请选择学历" style="width: 200px">
              <el-option
                  v-for="item in eduOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </div>
          <div class="selectBoxSon">
            <div style="text-align: center;line-height: 32px">出生日期：</div>
            <el-date-picker
                v-model="birthday"
                type="daterange"
                range-separator="→"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :size="'default'"
                style="width: 240px"
            />
          </div>
          <div class="selectBoxSon">
          <div style="text-align: center;line-height: 32px">薪资范围：</div>
          <el-select v-model="salary" placeholder="请选择薪资范围" style="width: 200px">
            <el-option
                v-for="item in salaryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
          </div>
          <div class="selectBoxSon">
          <div style="text-align: center;line-height: 32px">工作经验：</div>
          <el-select v-model="experience" placeholder="请选择工作经验" style="width: 200px">
            <el-option
                v-for="item in experienceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
          </div>
        </div>
        <div class="selectBoxUncle">
          <el-button type="primary" @click="openFormVisible('重置',false)" style="margin-right: 5px;background-color: white;color: black">重置</el-button>
          <el-button type="primary" @click="openFormVisible('查询',false)" style="margin-right: 5px">查询</el-button>
        </div>
      </div>
      <div class="apply">
        <div style="display: flex;justify-content: right;align-items: center">
          <div class="tableSet4">
            <div>
              <el-icon size="19"><RefreshRight /></el-icon>
            </div>
            <div>
              <el-icon size="19"><Sort /></el-icon>
            </div>
            <div>
              <el-icon size="19"><Setting /></el-icon>
            </div>
          </div>
        </div>
          <el-table :data="applyList.list" style="width: 100%" v-loading="loading">
            <el-table-column label="序号" prop="" width="90" type="index"/>
            <el-table-column label="用户名" prop="user.username" width="130" />
            <el-table-column label="职位" prop="job.position.name" width="130" />
            <el-table-column label="类型" prop="type" width="130" >
              <template #default="{ row }">
                <el-button v-if="row.type === 0" class="fw" size="small">投递简历</el-button>
                <el-button v-if="row.type === 1" class="nb" size="small">已沟通</el-button>
              </template>
            </el-table-column>
            <el-table-column label="最终结果" prop="result" width="120">
              <template #default="{ row }">
                <el-button v-if="row.result === 0" class="nb" size="small">待定</el-button>
                <el-button v-if="row.result === 1" class="btn-on" size="small">通过</el-button>
                <el-button v-if="row.result === 2" class="btn-off" size="small">未通过</el-button>
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="comment" width="230" />
            <el-table-column label="投递时间" prop="created_at" width="190">
              <template #default="scope">
                <span>{{$filters.formatDate(scope.row.created_at)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" prop="" width="230">
              <span @click="handleDelete(row)" class="Delete">删除</span>
            </el-table-column>
          </el-table>
        <div style="display: flex;justify-content: right;padding: 10px" >
          <div class="pageText" style="float: left;margin: 5px 15px">
            第 {{ (AllPages.page - 1) * AllPages.per_page + 1 }} -
            <span v-if="AllPages.per_page*AllPages.page<=applyList.total">{{AllPages.page*AllPages.per_page}}</span>
            <span v-else>{{applyList.total}}</span>
            条 / 总共 {{ applyList.total }} 条
          </div>
          <el-pagination
              :current-page="AllPages.page"
              :page-size="AllPages.per_page"
              :pager-count="3"
              background
              layout="prev, pager, next"
              :total="applyList.total"
              size="small"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              style="margin-top: 3px"
          />
        </div>
      </div>
    </section>
  </div>

</template>
<script setup>
import Title from "@/components/public/Title.vue";
import { useRoute } from "vue-router";
import { ApplyList } from "@/network/apply";
import { reactive, ref } from "vue";
import {ElTableColumn} from "element-plus";

const route = useRoute();
const title = route.meta.title;

// 查询条件选择
const education =ref('')
const eduOptions=ref([
  {
    value: 0,
    label: '高中以下'
  },{
    value: 1,
    label: '高中'
  },{
    value: 2,
    label: '中专/技校'
  },{
    value: 3,
    label: '大专'
  },{
    value: 4,
    label: '本科'
  },{
    value: 5,
    label: '硕士'
  },{
    value: 6,
    label: '博士'
  }
])

const birthday=ref('')

const salary=ref('')
const salaryOptions=ref([
  {
    value: 0,
    label: '面议'
  },{
    value: 1,
    label: '1-3k'
  },{
    value: 2,
    label: '3-5k'
  },{
    value: 3,
    label: '5-8k'
  },{
    value: 4,
    label: '8-12k'
  },{
    value: 5,
    label: '12-15k'
  },{
    value: 6,
    label: '15-20k'
  },{
    value: 7,
    label: '20k以上'
  }
])

const experience=ref('')
const experienceOptions=ref([
  {
    value: 0,
    label: '不限'
  },{
    value: 1,
    label: '1年以内'
  },{
    value: 2,
    label: '1-3年'
  },{
    value: 3,
    label: '3-5年'
  },{
    value: 4,
    label: '5-10年'
  },{
    value: 5,
    label: '10年以上'
  }
])


//获取列表数据
const applyList =ref({
  list:[
    {
      job:[
        {
          position:[],
          company:[]
        }
      ],
      chat_thread:[],
      user:[],
    }
  ],
  total:0,
})
const AllPages=reactive({
  page:1,
  per_page:10,
  total:0,
})
const loading= ref(true)

// const getApplyList=()=>{
//   ApplyList(AllPages).then((res)=>{
//     console.log(res.data.data)
//     const {list,total}=res.data.data
//     applyList.value.list=list
//     applyList.value.total=total
//     AllPages.total=res.data.length
//     if (res.data.code===0){
//       setTimeout(()=>{
//         loading.value=false
//       },600)
//     }else {
//       loading.value=true
//     }
//   })
// }

const getApplyList = () => {
  // 构建请求的参数
  const params = {
    page: AllPages.page,
    per_page: AllPages.per_page,
    education: education.value,
    birthday: birthday.value,
    salary: salary.value,
    experience: experience.value
  };

  ApplyList(params).then((res) => {
    console.log(res.data.data);
    const { list, total } = res.data.data;
    applyList.value.list = list;
    applyList.value.total = total;
    AllPages.total = total;
    if (res.data.code === 0) {
      setTimeout(() => {
        loading.value = false;
      }, 600);
    } else {
      loading.value = true;
    }
  });
};

getApplyList()


//分页切换
const handleCurrentChange = (val) => {
  AllPages.page=val
  loading.value=true
  getApplyList()
}
const handleSizeChange = (val) => {
  AllPages.per_page=val
  AllPages.page=1
  loading.value=true
  getApplyList()
}

</script>

<style scoped lang="scss">
.apply{
  background-color: white;
  padding: 0 24px;
}
.tableSet4 {
  padding: 16px 0;
  display: flex;
  justify-content: flex-end;
  div {
    padding: 8px;
  }
}
.selectBox{
  width: 100%;
  background-color: white;
  margin-bottom: 20px;
  padding: 20px;
  .selectBoxFather {
    display: flex;
    justify-content: space-around;
    .selectBoxSon {
      display: flex;
      justify-content: center;
      align-content: center
    }
  }
  .selectBoxUncle{
    display: flex;
    justify-content: right;
    margin-top: 25px;
    padding-right: 25px;
  }
}
.fw {
  color: #389e0d;
  background: #f6ffed;
  border-color: #b7eb8f;
}

.nb {
  color: #096DD9;
  background: #E6F7FF;
  border-color: #91d5ff;
}
.btn-on {
  color: #389e0d;
  background: #f6ffed;
  border-color: #b7eb8f;
}

.btn-off {
  color: #cf1322;
  background: #fff1f0;
  border-color: #ffa39e;
}
.Delete{
  cursor: pointer;
  color:#1890ff;
  padding:0 5px ;
}
</style>